<template>
  <view class="main">
    <view class="tab">
      <tn-tabs v-model="currentTabIndex" bar-color="#008298" active-color="#272727" :bottom-shadow="false">
        <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index" :title="item.text" />
      </tn-tabs>
    </view>
    <view class="list">
      <view class="item dispaly-just-between" v-for="(item, index) in careListData" @click="skip(item)">
        <view class="left dispaly-center">
          <view class="avatar">
            <image mode="aspectFill" :src="type == 2 ? item.company_logo : item.avatar" />
          </view>
          <view class="name">{{ type == 2 ? item.company_name : item.nickname }}</view>
        </view>
        <!-- <view @click="postCancelCare(item)" class="right dispaly-align-center"
          :class="{ 'g': index % 2 == 0, 'y': index % 2 != 0 }">已关注</view> -->
        <view @click.stop="cancenCare(item.id, item.user_id)" v-if="type == 2 || type == 1"
          class="g right dispaly-align-center">已关注</view>

        <view v-if="type == 3">
          <view v-if="item.is_care == 1" @click.stop="cancenCareOne(item.user_id, index)"
            class="g right dispaly-align-center">已关注</view>
          <view v-else @click.stop="care(item.user_id, index)" class="y right dispaly-align-center">未关注</view>
        </view>

      </view>
      <LoadMore :status="status" :show="loadShow" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import { ref, reactive, onMounted } from 'vue'
import type { TabDataType } from '@/types/more'
import { getCareList, cancelCare } from '@/api/home/home'
import type { RequestCareListType } from '@/types/requstParm'
import type { CareListType } from '@/types/responseData'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'


// 添加关注
const formData = reactive<RequestAddCareType>({
  user_id: 2,
  relation_id: '',
  type: 2
})

// 关注
const care = async (id: number, index: number) => {
  formData.relation_id = id
  const res = await postAddCare(formData)
  if (res == 'ok') {
    careListData.value[index].is_care = 1
  }
}

// 取消关注
const cancenCare = async (id: number, user_id: number) => {
  let fId = ref<number | string>('')
  let t = ref<number | string>('')
  if (type.value == 1) {
    fId.value = user_id
    t.value = type.value
  }
  else if (type.value == 2) {
    t.value = type.value
    fId.value = id
  }
  const res = await postCancelCare(fId.value as number, t.value as number)
  if (res == 'ok') {
    init()
    getListData()
  }
}

const cancenCareOne = async (user_id: number, index: number) => {
  const res = await postCancelCare(user_id, 1)
  if (res == 'ok') {
    careListData.value[index].is_care = 0
  }
}

// 跳转
const skip = (item: CareListType) => {
  if (type.value == 1 || type.value == 3) {
    let is_care = ref<number>()
    is_care.value = type.value == 1 ? 1 : item.is_care
    navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${is_care.value}`)
  } else {
    navTo(`/subPackage/doubleSelectionMeeting/unitDetail?id=${item.id}&is_care=${1}
    &name=${item.company_name}&logo=${item.company_logo}
    &areas=${item.areas}&is_care=${1}`)
  }
}

const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
  {
    text: '我关注的人',
    type: 1
  },
  {
    text: '关注我的人',
    type: 3
  },
  {
    text: '我关注的公司',
    type: 2
  }
])


// 请求关注列表
let queryData = reactive<RequestCareListType>({
  user_id: 2,
  type: 1,
  page: 1,
  limit: 10,
})
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let careListData = ref<Array<CareListType>>([])
const getListData = async () => {
  status.value = 'loading'
  const res = await getCareList(queryData)
  if (res.code == 0) {
    if (res.data.list.length) {
      status.value = 'loadmore'
      loadShow.value = true
      careListData.value = [...careListData.value, ...res.data.list]
    } else {
      loadShow.value = true
      status.value = 'nomore'
    }
  }
}

// 切换tab
let type = ref<number>(1)
const changeTab = (item: TabDataType) => {
  type.value = item.type
  init()
  queryData.type = item.type
  getListData()
}

const init = () => {
  careListData.value = []
  queryData.page = 1
}

onReachBottom(() => {
  (queryData.page as number)++
  getListData()
})

onPullDownRefresh(async () => {
  uni.showLoading()
  init()
  await getListData()
  uni.stopPullDownRefresh()
  uni.hideLoading()
})

onMounted(() => {
  getListData()
})
</script>
<style lang="scss" scoped>
.g {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #008298;
}

.y {
  background: #008298;
  border-radius: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
}

.main {
  .list {
    padding: 22rpx 30rpx;

    .item:last-child {
      margin-bottom: 0;
    }

    .item {
      padding: 20rpx 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      .left {
        .avatar {
          margin-right: 14rpx;

          image {
            width: 84rpx;
            height: 84rpx;
            border-radius: 50%;
          }
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #272727;
        }
      }

      .right {
        border: 1rpx solid #008298;
        width: 91rpx;
        height: 39rpx;
        border-radius: 20rpx;
      }
    }
  }
}
</style>